<template>
  <div class="common-record">
    <div v-for="(item, index) in commonRecords" :key="index" class="item">
      <div class="label" v-html="item.content"></div>
      <div class="askContent" v-if="showAskStatus">
        <div class="name">{{ item.title }}:</div>
        <div class="info">
          Lorem ipsum doolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et
          viverra justo commodo.
        </div>
      </div>
      <div class="commonContent">
        <span class="from">From:</span>
        <span class="content" v-html="item.title"></span>
      </div>
      <div class="time">{{ formatDate(item.create_time) }}</div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, unref, watch, defineProps, defineEmits } from "vue";
import { formatDate } from "@/utils/index";
const data = defineProps({
  commonRecords: {
    type: Array,
    default: () => [],
  },
  showAskStatus: {
    type: Boolean,
    default: true,
  },
});
</script>

<style lang="scss" scoped>
.common-record {
  margin: 15px 12px 0 12px;
  .item {
    margin-bottom: 15px;
    .label {
      font-size: var(--default12px);
      color: var(--otherFontColor);
    }
    .askContent {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .name {
        min-width: 80px;
        font-size: var(--default12px);
      }
      .info {
        flex: 1;
        font-size: var(--default12px);
        margin-left: 10px;
        color: var(--main-color);
      }
    }
    .commonContent {
      background-color: var(--bgColor);
      padding: 8px 10px 8px 10px;
      border-radius: 5px;
      margin-top: 10px;
      .from {
        color: var(--main-color);
        font-size: var(--default13px);
        font-weight: bold;
      }
      .content {
        font-size: var(--default12px);
        color: #6f6f70;
        margin-left: 10px;
      }
    }
    .time {
      color: var(--timeFontColor);
      font-size: var(--default12px);
      margin-top: 10px;
    }
  }
}
</style>
